<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            title="分配权限"
            width="50%"
            :before-close="handleClose"
        >
        <el-tree
            ref="treeRef"
            :data="data"
            show-checkbox
            node-key="id"
            highlight-current
            :props="defaultProps"
        />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="really">
                确定
                </el-button>
            </span>
        </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ElMessageBox } from 'element-plus'
    import {ref, reactive, toRefs} from 'vue'

    const props=withDefaults(defineProps<{
        dialogVisible:boolean
    }>(),{
        dialogVisible:false
    })

    // x号关闭
    const handleClose = (done: () => void) => {
        ElMessageBox.confirm('确认关闭?')
        .then(() => {
            done()
        })
        .catch(() => {
        // catch error
        })
    }
    let emit=defineEmits(['cancel','really'])
    // 取消
    const cancel=()=>{
        emit('cancel',false)
    }
    // 确定
    const really=()=>{
        emit('really',false)
    }
     // 分配权限
     const defaultProps = {
      children: 'children',
      label: 'label',
    }
    const data: any = reactive([
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1',
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [
            {
              id: 5,
              label: 'Level two 2-1',
            },
            {
              id: 6,
              label: 'Level two 2-2',
            },
          ],
        },
        {
          id: 3,
          label: 'Level one 3',
          children: [
            {
              id: 7,
              label: 'Level two 3-1',
            },
            {
              id: 8,
              label: 'Level two 3-2',
            },
          ],
        },
      ])
</script>

<style lang="scss" scoped>
// .dialog-footer button:first-child {
//   margin-right: 10px;
// }
.el-message-box{
    display: flex;
    place-items: center;
    margin: 0 auto;
}
</style>